// @flow
import React, { Component } from 'react';

import '../static/css/common.css';
import '../static/css/login.css';
import { Form, Icon, Input, Button, Checkbox, message } from 'antd';
import Windows from './Windows';
import { ipcRenderer } from 'electron'
import avatar from '../static/images/avatar.png'
const { shell } = require('electron');
const FormItem = Form.Item;
import axios from 'axios';
import { inject, observer } from 'mobx-react';

@inject('coins')
@observer	
export default class NormalLoginForm extends Component<Props> {

	constructor(props) {
		super(props)

		let ajaxURL = this.props.coins.currentAjaxURL
		let copyright = this.props.coins.currentCopyright
		let permission = this.props.coins.currentPermission

		this.state = {
			permission: permission,
			ajaxURL: ajaxURL,
			copyright: copyright,
			password: '',
			account: '',
		}
		this.openBrowser = this.openBrowser.bind(this)
	}

	handleSubmit = (e) => {
		e.preventDefault();
		// ajax返回
		var that = this
		axios.get(this.state.ajaxURL, {
			// params: 

		})
			.then(function (res) {
				// console.log(res)
				let ajaxRes =  res
				if (ajaxRes['permissionCode'] == 0) {
					// this.error(ajaxRes['code'], ajaxRes['info'])
				} else {
					// 假定 返回的code是3
					ajaxRes['permissionCode'] = 3
					ipcRenderer.send('getAfterLoginData', ajaxRes['permissionCode'])
					ipcRenderer.on('returnAfterLoginData',  (event,permissionCode) => {
						console.log(permissionCode)
						that.changePermissionToStore(permissionCode)
						that.props.updateRootComponents(permissionCode)
					})
				}
			})
			.catch(function (error) {
				this.error()
			})
	}

	error = (code, info) => {
		message.config({
			top: 35,
			duration: 3,
		});
		message.error('返回码「'+code+'」：'+info+'。');
	};

	openBrowser() {
		shell.openExternal(this.state.ajaxURL);
	}

	changePermissionToStore(code) {
		var r = this.props.coins.changePermissionTo(code);
	}

	componentWillMount() {
		ipcRenderer.send('getBeforeLoginData')
		ipcRenderer.on('returnBeforeLoginData', (event, permissionCode) => {
			this.changePermissionToStore(permissionCode)
		})
	}

	componentDidMount() {
		var r = this.props.coins.currentPermission
		// console.log(r)
		this.setState({
			permission: r
		})
	}

	render() {
		let background
		if ((this.state.permission == 1) || (this.state.permission == 0)) {
			background = (
				<ul className="bg-bubbles">
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			)
		} else {
			background = ''
		}

		return (
			<div className="login">
				<Windows permission={this.state.permission} />
				<div className="login-content">
					{/* <div>
						<img src={avatar} alt=""/>
					</div>	 */}
					<Form onSubmit={this.handleSubmit} className="login-form">
						<FormItem>
							<Input
								className="login-input"
								prefix={<Icon type="user"
									style={{ color: 'rgba(0,0,0,.35)' }} />}
								placeholder="请输入账号…"
								autoFocus="autofocus" />
						</FormItem>
						<FormItem>
							<Input
								className="login-input"
								prefix={<Icon type="lock"
									style={{ color: 'rgba(0,0,0,.35)' ,}} />}
								type="password"
								placeholder="请输入密码…" />
						</FormItem>

						<FormItem>

							<Button
								onClick={this.handleSubmit}	
								type="primary"
								htmlType="submit"
								className="login-form-button"
							>登&nbsp;录
							<Icon type="right" />
							</Button>
							<div className="register">
								<span onClick={this.openBrowser}>
									或者 &nbsp;现在去注册
								</span>
							</div>
						</FormItem>

					</Form>
					<div className="copyright">
						{this.state.copyright}
					</div>
				</div>
				{background}
			</div>
		);
	}
}